<template>
  <div>
    <!--右侧弹出框添加修改组织信息-->
    <ta-drawer :title="editType == '1'? '添加邮箱':'编辑邮箱'" width="500" placement="right" :closable="true" @close="closeEdit" :visible="visible" destroyOnClose>
      <div id="emailForm">
        <ta-form :autoFormCreate="(form)=>{this.form = form}">
          <ta-form-item  label='编号'
                         :labelCol="formItemLayout.labelCol"
                         :wrapperCol="formItemLayout.wrapperCol"
                         fieldDecoratorId="id"
                         :fieldDecoratorOptions="{initialValue: formData.id}">
            <ta-input placeholder="请输入邮箱账号" disabled />
          </ta-form-item>
          <ta-form-item  label='邮箱账号'
                         :labelCol="formItemLayout.labelCol"
                         :wrapperCol="formItemLayout.wrapperCol"
                         fieldDecoratorId="emailaddress"
                         :fieldDecoratorOptions="{rules: [{ required: true, message: '邮箱账号不能为空!' }],initialValue: formData.emailaddress}">
            <ta-input placeholder="请输入邮箱账号" @blur="fnAfterTypeEmailAddress()" v-model="addressValue"  />
          </ta-form-item>
          <ta-form-item label='授权码'
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                        fieldDecoratorId="password"
                        :fieldDecoratorOptions="{rules: [{ required: true, message: '授权码不能为空!' }],initialValue: formData.password}">
            <ta-input placeholder="请输入授权码"/>
          </ta-form-item>
          <ta-form-item label='发送主机'
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                        fieldDecoratorId="sendhost"
                        :fieldDecoratorOptions="{rules: [{ required: true, message: '发送主机不能为空!' }],initialValue: formData.sendhost}">
            <ta-input placeholder="请输入发送主机" v-model="hostValue"/>
          </ta-form-item>
          <ta-form-item label='发送端口'
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                        fieldDecoratorId="sendport"
                        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入发送端口!' }],initialValue: formData.sendport}">
            <ta-input placeholder="请输入发送端口" />
          </ta-form-item>
          <ta-form-item label='发送协议'
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                        fieldDecoratorId="sendssl"
                        :fieldDecoratorOptions="{rules: [{ required: true, message: '发送协议不能为空!' }],valuePropName: 'defaultValue', initialValue: formData.sendssl}">
            <ta-radio-group name="radioGroup" @change="fnChangePort">
              <ta-radio :value="'1'" id="isSendSSL">SSL</ta-radio>
              <ta-radio :value="'0'" id="isSendTLS">TLS</ta-radio>
            </ta-radio-group>
          </ta-form-item>
          <ta-form-item label="是否默认"
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                        fieldDecoratorId="defaultemail"
                        :fieldDecoratorOptions="{ valuePropName: 'checked', initialValue: formData.defaultemail}"
          >
            <ta-switch checkedChildren="是" unCheckedChildren="否"/>
          </ta-form-item>
        </ta-form>
      </div>

      <div slot="footer" :style="{
                              position: 'absolute',
                              bottom: 0,
                              width: '100%',
                              borderTop: '1px solid #e8e8e8',
                              padding: '10px 16px',
                              textAlign: 'right',
                              left: 0,
                              background: '#fff',
                              borderRadius: '0 0 4px 4px',
                            }">
        <ta-button-group>
          <ta-button @click="onResetForm()">重置</ta-button>
          <ta-button type="primary" @click="saveEmail">保存</ta-button>
        </ta-button-group>
      </div>

    </ta-drawer>
  </div>
</template>
<script>
import $api from '../api/index'
const formItemLayout = {
  labelCol: {span: 5},
  wrapperCol: {span: 19}
}
export default {
  name: 'addOrEditEmail',
  props: ['visible', 'editType', 'rowData'],
  data () {
    return {
      formItemLayout,
      formData: {},
      addressValue: '',
      hostValue: ''
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.setValue()
      }
    }
  },
  methods: {
    // 初始化页面
    setValue () {
      // type = 1 新增，type=2 编辑
      if (this.editType == '2') {
        Object.keys(this.rowData).forEach(field => {
          if (field == 'defaultemail') {
            this.formData[field] = this.rowData[field] == '1'
          } else {
            this.formData[field] = this.rowData[field]
          }
        })
      } else {
        this.formData['sendssl'] = '1'
        this.formData['sendport'] = '25'
      }
    },
    // 重置页面
    onResetForm () {
      this.form.resetFields()
    },
    // 点击关闭按钮事件
    closeEdit () {
      this.$emit('close')
      this.formData = {}
    },
    // 点击保存按钮,修改或新增邮件
    saveEmail () {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.defaultemail = values.defaultemail ? '1' : '0'
          if (this.editType == '1') {
            $api.addEmail(this, values, (data) => {
              this.$message.success('新增成功')
              this.$emit('editSuccess')
              this.closeEdit()
            })
          } else {
            $api.editEmail(this, values, (data) => {
              this.$message.success('修改成功')
              this.$emit('editSuccess')
              this.closeEdit()
            })
          }
        }
      })
    },
    // 对邮箱账号进行验证，并与发送主机关联
    fnAfterTypeEmailAddress () {
      let reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      if (reg.test(this.addressValue)) {
        this.form.setFieldsValue({
          sendhost: 'smtp.' + this.addressValue.substr(this.addressValue.lastIndexOf('@') + 1, this.addressValue.length)
        })
      } else {
        this.$message.warn('邮箱格式不正确，请重新输入')
        this.form.setFieldsValue({
          emailaddress: ''
        })
      }
    },
    // 发送协议与发送端口关联
    fnChangePort (e) {
      const value = e.target.value
      if (value == '1') {
        this.formData['sendport'] = '25'
      } else {
        this.formData['sendport'] = '465'
      }
    }
  }
}
</script>

<style scoped>

</style>
